<template>
  <div>
    <div class="py-1 px-1 bg-white d-scroll listInner">
      <custom-title :is-line="true" title="基本信息" />
      <van-image
        width="100"
        height="100"
        :src="imgSrc"
      >
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
      <div class="baseInfo">
        <div v-for="(item, index) in descList" :key="index">
          <custom-details-item
            v-if="item.type === 'all' || item.type === active || (item.type instanceof Array && item.type.includes(active))"
            one-color
            :label="item.label"
            :value="value(item) + ''"
          />
        </div>
      </div>
      <template v-if="active !== '涉火作业人员'">
        <custom-title :is-line="true" title="证书信息" />
        <div v-if="listData && listData.length>0" class="common_list" style="padding: 0">
          <div v-for="(item, index) in listData" :key="index" class="list_item">
            <div class="content_area">
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">{{ item.certifyName }}</div>
                <ul>
                  <li v-if="active === '安全管理人员'">
                    <i class="iconfont c-text-color1">&#xe725;</i>
                    <div class="label">证书种类：</div>
                    <div class="value">{{ item.certifyCategoryName }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color2">&#xe634;</i>
                    <div class="label">证书名称：</div>
                    <div class="value">{{ item.certifyName }}</div>
                  </li>
                  <template v-if="active === '专家库' || active === '安全管理人员'">
                    <li>
                      <i class="iconfont c-text-color3">&#xe634;</i>
                      <div class="label">证书等级：</div>
                      <div class="value">{{ item.certifyLevelName }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color4">&#xe664;</i>
                      <div class="label">专业：</div>
                      <div class="value">{{ item.speciality }}</div>
                    </li>
                  </template>
                  <template v-if="active === '特种设备作业/管理人员'">
                    <li>
                      <i class="iconfont c-text-color2">&#xe634;</i>
                      <div class="label">作业项目：</div>
                      <div class="value">{{ item.operationItems }}</div>
                    </li>
                  </template>
                  <template v-if="active === '特种作业人员' || active === '特种设备作业人员'">
                    <li v-if="active === '特种作业人员'">
                      <i class="iconfont c-text-color2">&#xe634;</i>
                      <div class="label">操作项目：</div>
                      <div class="value">{{ item.operationItems }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color3">&#xe634;</i>
                      <div class="label">作业类别：</div>
                      <div class="value">{{ item.jobCategoryName }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color4">&#xe664;</i>
                      <div class="label">应复审日期：</div>
                      <div class="value d-flex">{{ item.certifyEndTime }} <van-tag v-if="item.item5" class="ml-1" plain type="danger" style="display: block">临期</van-tag></div>
                    </li>
                  </template>
                  <li>
                    <i class="iconfont c-text-color5">&#xe612;</i>
                    <div class="label">证书初领日期：</div>
                    <div class="value">{{ item.receiveTime }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color6">&#xe6bb;</i>
                    <div class="label">证书有效期（起）：</div>
                    <div class="value">{{ item.certifyStarTime }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color7">&#xe6bb;</i>
                    <div class="label">证书有效期（止）：</div>
                    <div class="value">{{ item.certifyEndTime }}</div>
                  </li>
                  <template v-if="active === '特种设备作业/管理人员'">
                    <li>
                      <i class="iconfont c-text-color6">&#xe634;</i>
                      <div class="label">应复审日期：</div>
                      <div class="value">{{ item.certifyEndTime }}</div>
                    </li>
                  </template>
                  <li>
                    <i class="iconfont c-text-color7">&#xe677;</i>
                    <div class="label">证书附件：</div>
                    <div class="value">
                      <el-link type="primary" @click="openAttachPopUp(item.shareAttachVos)">
                        查看
                      </el-link>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无证书信息" />
        <template v-if="false">
          <custom-title :is-line="true" title="培训记录" />
          <div v-if="trainingRecordsList && trainingRecordsList.length>0" class="common_list" style="padding: 0">
            <div v-for="(item, index) in trainingRecordsList" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">{{ item.name }}</div>
                  <ul>
                    <li>
                      <i class="iconfont c-text-color1">&#xe725;</i>
                      <div class="label">企业名称：</div>
                      <div class="value">{{ item.type }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color2">&#xe634;</i>
                      <div class="label">培训类别：</div>
                      <div class="value">{{ item.trainType }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color3">&#xe700;</i>
                      <div class="label">培训对象：</div>
                      <div class="value">{{ item.type }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color4">&#xe685;</i>
                      <div class="label">培训时间：</div>
                      <div class="value">{{ item.trainTime }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color5">&#xe685;</i>
                      <div class="label">培训学时（h）：</div>
                      <div class="value">{{ item.trainHour }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color6">&#xe6f7;</i>
                      <div class="label">培训级别：</div>
                      <div class="value">{{ item.trainLevel }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color7">&#xe626;</i>
                      <div class="label">考核通过率：</div>
                      <div class="value">{{ item.type }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无培训信息" />
        </template>
      </template>
      <template v-else>
        <custom-title :is-line="true" title="培训记录" />
        <div class="common_list" style="padding: 0">
          <template v-if="trainingRecordsList && trainingRecordsList.length>0">
            <div v-for="(item, index) in trainingRecordsList" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">{{ item.name }}</div>
                  <ul>
                    <li>
                      <i class="iconfont c-text-color1">&#xe725;</i>
                      <div class="label">培训类别：</div>
                      <div class="value">{{ item.trainTypeName }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color2">&#xe634;</i>
                      <div class="label">培训时间：</div>
                      <div class="value">{{ item.trainTime }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color3">&#xe664;</i>
                      <div class="label">培训学时（h）：</div>
                      <div class="value">{{ item.trainHour }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color4">&#xe612;</i>
                      <div class="label">培训地点：</div>
                      <div class="value">{{ item.trainPlace }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color5">&#xe634;</i>
                      <div class="label">培训级别：</div>
                      <div class="value">{{ item.trainLevel }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color6">&#xe6bb;</i>
                      <div class="label">培训形式：</div>
                      <div class="value">{{ item.trainShape }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color7">&#xe634;</i>
                      <div class="label">培训内容：</div>
                      <div class="value">{{ item.trainContent }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color1">&#xe634;</i>
                      <div class="label">培训单位：</div>
                      <div class="value">{{ item.trainingUnit }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color2">&#xe664;</i>
                      <div class="label">培训考核得分：</div>
                      <div class="value">{{ item.effectEvaluation }}</div>
                    </li>

                    <li>
                      <i class="iconfont c-text-color3">&#xe6bb;</i>
                      <div class="label">考核结果记录表：</div>
                      <div class="value">
                        <el-link type="primary" @click="openAttachPopUp(item['testResultFormFileList'],'attachPopUp1')">查看</el-link>
                      </div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color4">&#xe6bb;</i>
                      <div class="label">参训人员签到表：</div>
                      <div class="value">
                        <el-link type="primary" @click="openAttachPopUp(item['trainPeopleSignFileList'],'attachPopUp2')">查看</el-link>
                      </div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color5">&#xe6bb;</i>
                      <div class="label">培训资料：</div>
                      <div class="value">
                        <el-link type="primary" @click="openAttachPopUp(item['trainMaterialsFileList'],'attachPopUp3')">查看</el-link>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else description="暂无培训信息" />
        </div>
      </template>
    </div>
    <attachPopUp ref="attachPopUp" />
    <attachPopUp ref="attachPopUp1" />
    <attachPopUp ref="attachPopUp2" />
    <attachPopUp ref="attachPopUp3" />
  </div>
</template>

<script>
import { AqTrainList, ExpertInfo, ManagerInfo } from '@/api/commonPage/personnel'
import commonList from '@/assets/mixin/commonList'

export default {
  name: 'BasicComponent',
  inject: ['layout'],
  mixins: [commonList],
  data() {
    return {
      companyName: '',
      active: '',
      current: '',
      companyId: '',
      descList: [
        { label: '姓名', value: '', fieldName: 'userName', type: '专家库' },
        { label: '姓名', value: '', fieldName: 'managerName', type: ['火工作业人员', '安全管理人员', '特种作业人员', '特种设备作业/管理人员', '特种设备作业%2F管理人员', '特种设备作业人员', '涉火作业人员'] },
        { label: '属性类别', value: [], fieldName: 'expertAttributeList', type: '专家库' },
        { label: '专业类别', value: '', fieldName: 'professionTypeName', type: ['专家库', '特种设备作业人员'] },
        { label: '所学专业', value: '', fieldName: 'specialityType', type: ['安全管理人员'] },
        // { label: '专家类别', value: '', fieldName: 'expertCategoryName', type: '专家库' },
        { label: '性别', value: '', fieldName: 'sexName', type: 'all' },
        { label: '出生日期', value: '', fieldName: 'birthTime', type: 'all' },
        { label: '年龄', value: '', fieldName: 'age', type: 'all' },
        { label: '联系电话', value: '', fieldName: 'phone', type: 'all' },
        { label: '学历', value: '', fieldName: 'educationLevelName', type: 'all' },

        { label: '职称', value: '', fieldName: 'jobTitleName', type: ['专家库', '安全管理人员', '特种设备作业人员'] },
        { label: '职务', value: '', fieldName: 'jobName', type: ['特种设备作业人员'] },
        { label: '职务', value: '', fieldName: 'job', type: ['专家库', '安全管理人员'] },
        { label: '作业类别', value: '', fieldName: 'jobCategoryName', type: '特种作业人员' },
        { label: '工作单位', value: '', fieldName: 'workUnit', type: 'all' },
        { label: '车间', value: '', fieldName: 'workPlace', type: '涉火作业人员' },
        { label: '岗位', value: '', fieldName: 'workPost', type: '涉火作业人员' },
        { label: '从事生产工艺', value: '', fieldName: 'workProcess', type: '涉火作业人员' },
        { label: '开始从事相关工作时间', value: '', fieldName: 'workYear', type: 'all' },
        { label: '从事相关工作年限', value: '', fieldName: 'workLife', type: 'all' },
        { label: '专职/兼职', value: '', fieldName: 'partFullName', type: '安全管理人员' },
        { label: '注册安全工程师证书', value: '', fieldName: 'isSafetyCertifyName', type: '安全管理人员' },
        // { label: '人员类别', value: '', fieldName: 'managerTypeName', type: '特种设备作业/管理人员' },
        { label: '作业项目', value: '', fieldName: 'jobCategoryName', type: '特种设备作业/管理人员' },
        { label: '毕业院校', value: '', fieldName: 'graduateSchool', type: ['安全管理人员'] },
        { label: '年度培训学时要求', value: '', fieldName: 'annualTrainRequire', type: ['安全管理人员'] },
        { label: '是否加入专家库', value: '', fieldName: 'isExpert', type: ['安全管理人员'] }

      ],
      listData: [],
      trainingRecordsList: [],
      imgSrc: ''
    }
  },
  computed: {
    value() {
      return (item) => {
        return item.fieldName === 'expertAttributeList' ? item.value.map(val => val.expertattributename).join(',') : item.value
      }
    }
  },
  created() {
    const { current, id, active } = this.$route.query
    this.id = id || ''
    this.current = current || ''
    this.active = active || ''
  },
  mounted() {
    this.basicInfo()
    this.trainingRecords()
  },
  methods: {
    // 基本信息
    async basicInfo() {
      this.layout.showAreaLoading(['.baseInfo'])
      const { data, status } = await (this.active === '专家库' ? ExpertInfo : ManagerInfo)({
        [this.active === '专家库' ? 'expertId' : 'managerId']: this.id,
        securityIndustryType: this.active.replace('人员', '')
      })
      if (status === 0 && data) {
        this.listData = data.certifyList
        this.descList.forEach((v) => {
          v.value = data[v.fieldName] ?? ''
          if (v.fieldName === 'isSafetyCertifyName') {
            v.value = data[v.fieldName] + `${data['safetyCertifyLevelName'] ? '（' + data['safetyCertifyLevelName'] + '）' : ''}`
          }
          if (v.fieldName === 'professionTypeName' && this.active !== '专家库') {
            v.value = data['specialityTypeName']
          }
        })
        this.imgSrc = data.fileUUId
      }
      this.layout.hideAreaLoading(['.baseInfo'])
    },
    //   培训记录
    async trainingRecords() {
      const { data, status } = await AqTrainList({ managerId: this.id })
      if (status === 0 && data) {
        if (data.length > 0 && data[0].companyId !== '') {
          this.trainingRecordsList = data
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.olMap {
  width: 100%;
  height: 350px;
}
</style>
